// out: ../css/
@import './base.less';
@vw: 3.75vw;
body {
    position: relative;
    background-color: #f9fafb;
}

header {
    display: flex;
    background-color: white;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: fixed;
    top: 0;
    padding: 0 (15/@vw);
    .left {
        background-image: url(../assets/head.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: (235/@vw);
        height: (50/@vw);
    }
    a {
        width: (80/@vw);
        height: (30/@vw);
        background-color: #ffe31b;
        border-radius: (15/@vw);
        text-align: center;
        line-height: (30/@vw);
    }
}

.search {
    display: flex;
    width: (345/@vw);
    height: (32/@vw);
    background-color: #f2f4f5;
    border-radius: (16/@vw);
    margin-top: (60/@vw);
    color: #a1a4b3;
    margin-left: (15/@vw);
    align-items: center;
    justify-content: center;
    .icon-sousuo {
        margin-right: (5/@vw);
    }
}

//banner
.banner img {
    width: (345/@vw);
    height: (108/@vw);
    margin-top: (10/@vw);
    border-radius: (5/@vw);
    margin-left: (15/@vw);
    object-fit: cover;
}


.rankings {
    margin-top: (20/@vw);
    margin: (20/@vw) (15/@vw);
}
.title {
    width: (345/@vw);
    height: (26/@vw);
    line-height: (26/@vw);
    display: flex;
    justify-content: space-between;
    margin-bottom: (20/@vw);
}
.title h4 {
    font-size: (20/@vw);
}
.title span {
    color: #a1a4b3;
}
.rankings .piece {
    display: flex;
    border-radius: (10/@vw);
    background-color: white;
    margin-bottom: (15/@vw);
}
.rankings img {
    width: (105/@vw);
    border-radius: (10/@vw);
    margin-right: (20/@vw);
}
.rankings ul li {
    font-size: (12/@vw);
    margin-bottom: (8/@vw);
    color: #a1a4b3;
}
.rankings ul {
    align-content: space-between;
}
.rankings .right {
    align-content: space-between;
    align-items: center;
    p {
        margin: (8/@vw) 0;
        
    }
}

.like {
    margin-top: (20/@vw);
    margin: (20/@vw) (15/@vw);
    .list img {
        width: (105/@vw);
        border-radius: (10/@vw);
    }
    .list li p {
        width: (105/@vw);
    }
    .list li {
        margin-bottom: (20/@vw);
    }
    .list ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}



.download {
    width: (345/@vw); 
    height: (45/@vw);
    display: flex;
    justify-content: space-between;
    line-height: (45/@vw);
    padding: 0 (10/@vw) 0 (15/@vw);
    border-radius: (45/@vw);
    background-color: white;
    position: fixed;
    bottom: (30/@vw);
    text-align: center;
    margin: 0 (15/@vw);
    .icon-right {
        border-radius: 50%;
        background-color: #ccc;
        width: (32/@vw);
        height: (32/@vw);
        line-height: (36/@vw);
        margin-top: (6/@vw);
    }
}
.download img {
    width: (36/@vw);
    height: (36/@vw);
    margin-right: (10/@vw);
    margin-bottom: (4/@vw);
}